<template>
  <div class="app-container" id="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<!--      <el-form-item label="系统用户ID，关联用户表" prop="userId">-->
<!--        <el-input-->
<!--          v-model="queryParams.userId"-->
<!--          placeholder="请输入系统用户ID，关联用户表"-->
<!--          filterable clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="员工ID" prop="empId">-->
<!--        <el-input-->
<!--          v-model="queryParams.empId"-->
<!--          placeholder="请输入员工ID"-->
<!--          filterable clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="学生姓名" prop="studentName">
        <el-input
          v-model="queryParams.studentName"
          placeholder="请输入学生姓名"
          filterable clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="学号" prop="studentNo">
        <el-input
          v-model="queryParams.studentNo"
          placeholder="请输入学号"
          filterable clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="学校名称" prop="school">
        <el-input
          v-model="queryParams.school"
          placeholder="请输入学校名称"
          filterable clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>


      <!-- 更多查询条件-->
      <template v-if="isShowMore">
        <el-form-item label="学历" prop="degree">
          <el-input
            v-model="queryParams.degree"
            placeholder="请输入学历"
            filterable clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="用户" prop="userId">
          <el-select v-model="queryParams.userId"  placeholder="请选择用户" @change="handleQuery">
            <el-option
              v-for="user in userList"
              :key="user.userId"
              :label="user.userName"
              :value="user.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学院" prop="college">
          <el-input
            v-model="queryParams.college"
            placeholder="请输入学院"
            filterable clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input
            v-model="queryParams.major"
            placeholder="请输入专业"
            filterable clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="班级名称" prop="className">
          <el-input
            v-model="queryParams.className"
            placeholder="请输入班级名称"
            filterable clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="实习单位" prop="internshipCompany">
          <el-input
            v-model="queryParams.internshipCompany"
            placeholder="请输入实习单位"
            filterable clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="实习岗位" prop="internshipPosition">
          <el-input
            v-model="queryParams.internshipPosition"
            placeholder="请输入实习岗位"
            filterable clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="实习开始日期" prop="internshipStart">
          <el-date-picker filterable clearable
                          v-model="queryParams.internshipStart"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择实习开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实习结束日期" prop="internshipEnd">
          <el-date-picker filterable clearable
                          v-model="queryParams.internshipEnd"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择实习结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="学校指导教师" prop="instructorTeacher">
          <el-input
            v-model="queryParams.instructorTeacher"
            placeholder="请输入学校指导教师"
            filterable clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="企业导师" prop="enterpriseMentor">
          <el-input
            v-model="queryParams.enterpriseMentor"
            placeholder="请输入企业导师"
            filterable clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>


      </template>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button :icon="isShowMore?'el-icon-d-arrow-right':'el-icon-d-arrow-left'" size="mini" type="warning" @click="isShowMore = !isShowMore">更多查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['collegeco:intern:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['collegeco:intern:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['collegeco:intern:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['collegeco:intern:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="internList" @selection-change="handleSelectionChange" stripe :height="tableHeight">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" width="55" label="序号" align="center" fixed/>
<!--      <el-table-column label="实习生ID，主键" align="center" prop="internId" />-->
<!--      <el-table-column label="系统用户ID，关联用户表" align="center" prop="userId" />-->
<!--      <el-table-column label="员工ID" align="center" prop="empId" />-->
      <el-table-column label="学生姓名" align="center" prop="studentName" />
      <el-table-column label="学号" align="center" prop="studentNo" min-width="150"/>
      <el-table-column label="学校名称" align="center" prop="school" min-width="150"/>
      <el-table-column label="学历" align="center" prop="degree" />
      <el-table-column label="学院" align="center" prop="college" min-width="150"/>
      <el-table-column label="专业" align="center" prop="major" min-width="150"/>
      <el-table-column label="班级名称" align="center" prop="className" min-width="150"/>
      <el-table-column label="实习单位" align="center" prop="internshipCompany" min-width="150"/>
      <el-table-column label="实习岗位" align="center" prop="internshipPosition" min-width="150"/>
      <el-table-column label="实习开始日期" align="center" prop="internshipStart" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.internshipStart, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实习结束日期" align="center" prop="internshipEnd" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.internshipEnd, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学校指导教师" align="center" prop="instructorTeacher" min-width="150"/>
      <el-table-column label="企业导师" align="center" prop="enterpriseMentor" min-width="150"/>
      <el-table-column label="实习记录" align="center" prop="internshipRecord" min-width="200"/>
      <el-table-column label="状态" align="center" prop="status" >
        <template slot-scope="scope">
          <el-tag
            size="small"
            :type="getStatusType(scope.row.status)"
          >
            {{ getStatusLabel(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-info"
              @click="handleInfo(scope.row)"
              v-hasPermi="['collegeco:intern:query']"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['collegeco:intern:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['collegeco:intern:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改实习生信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="68%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="20">
<!--      <el-col :span="8">-->
<!--            <el-form-item label="系统用户ID，关联用户表" prop="userId">-->
<!--              <el-input v-model="form.userId"  placeholder="请输入系统用户ID，关联用户表" />-->
<!--            </el-form-item>-->
<!--      </el-col>-->
<!--      <el-col :span="8">-->
<!--            <el-form-item label="员工ID" prop="empId">-->
<!--              <el-input v-model="form.empId"  placeholder="请输入员工ID" />-->
<!--            </el-form-item>-->
<!--      </el-col>-->
      <el-col :span="8">
            <el-form-item label="学生姓名" prop="studentName">
              <el-input v-model="form.studentName"  placeholder="请输入学生姓名" />
            </el-form-item>
      </el-col>
          <el-col :span="8">
            <el-form-item label="用户" prop="userId">
              <el-select v-model="form.userId"  placeholder="请选择用户" @change="handleQuery">
                <el-option
                  v-for="user in userList"
                  :key="user.userId"
                  :label="user.userName"
                  :value="user.userId"
                />
              </el-select>
            </el-form-item>
          </el-col>
      <el-col :span="8">
            <el-form-item label="学号" prop="studentNo">
              <el-input v-model="form.studentNo"  placeholder="请输入学号" />
            </el-form-item>
      </el-col>
      <el-col :span="8">
            <el-form-item label="学校名称" prop="school">
              <el-input v-model="form.school"  placeholder="请输入学校名称" />
            </el-form-item>
      </el-col>
          <el-col :span="8">
            <el-form-item label="学历" prop="degree">
              <el-input v-model="form.degree"  placeholder="请输入学历" />
            </el-form-item>
          </el-col>
      <el-col :span="8">
            <el-form-item label="学院" prop="college">
              <el-input v-model="form.college"  placeholder="请输入学院" />
            </el-form-item>
      </el-col>
      <el-col :span="8">
            <el-form-item label="专业" prop="major">
              <el-input v-model="form.major"  placeholder="请输入专业" />
            </el-form-item>
      </el-col>
      <el-col :span="8">
            <el-form-item label="班级名称" prop="className">
              <el-input v-model="form.className"  placeholder="请输入班级名称" />
            </el-form-item>
      </el-col>
      <el-col :span="8">
            <el-form-item label="实习单位" prop="internshipCompany">
              <el-input v-model="form.internshipCompany"  placeholder="请输入实习单位" />
            </el-form-item>
      </el-col>
      <el-col :span="8">
            <el-form-item label="实习岗位" prop="internshipPosition">
              <el-input v-model="form.internshipPosition"  placeholder="请输入实习岗位" />
            </el-form-item>
      </el-col>
          <el-col :span="8">
                <el-form-item label="实习开始日期" prop="internshipStart">
                  <el-date-picker filterable clearable
                    v-model="form.internshipStart"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择实习开始日期">
                  </el-date-picker>
                </el-form-item>
          </el-col>
          <el-col :span="8">
                <el-form-item label="实习结束日期" prop="internshipEnd">
                  <el-date-picker filterable clearable
                    v-model="form.internshipEnd"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择实习结束日期">
                  </el-date-picker>
                </el-form-item>
          </el-col>
      <el-col :span="8">
            <el-form-item label="学校指导教师" prop="instructorTeacher">
              <el-input v-model="form.instructorTeacher"  placeholder="请输入学校指导教师" />
            </el-form-item>
      </el-col>
      <el-col :span="8">
            <el-form-item label="企业导师" prop="enterpriseMentor">
              <el-input v-model="form.enterpriseMentor"  placeholder="请输入企业导师" />
            </el-form-item>
      </el-col>
          <el-col :span="24">
                <el-form-item label="实习记录" prop="internshipRecord">
                  <el-input v-model="form.internshipRecord" type="textarea" placeholder="请输入内容" />
                </el-form-item>
          </el-col>

        <el-col :span="14">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio
                v-for="dict in dict.type.collegeco_intern_status"
                :key="dict.value"
                :label="dict.value"
              >
                {{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 实习生信息详情对话框 -->
    <el-dialog :title="title" :visible.sync="openInfo" width="68%" append-to-body>
      <el-descriptions border >
<!--                        <el-descriptions-item label="系统用户ID，关联用户表" >{{form.userId}}</el-descriptions-item>-->
<!--                        <el-descriptions-item label="员工ID" >{{form.empId}}</el-descriptions-item>-->
                        <el-descriptions-item label="学生姓名" >{{form.studentName}}</el-descriptions-item>
                        <el-descriptions-item label="用户" >{{userName}}</el-descriptions-item>
                        <el-descriptions-item label="学号" >{{form.studentNo}}</el-descriptions-item>
                        <el-descriptions-item label="学校名称" >{{form.school}}</el-descriptions-item>
                        <el-descriptions-item label="学历" >{{form.degree}}</el-descriptions-item>
                        <el-descriptions-item label="学院" >{{form.college}}</el-descriptions-item>
                        <el-descriptions-item label="专业" >{{form.major}}</el-descriptions-item>
                        <el-descriptions-item label="班级名称" >{{form.className}}</el-descriptions-item>
                        <el-descriptions-item label="实习单位" >{{form.internshipCompany}}</el-descriptions-item>
                        <el-descriptions-item label="实习岗位" >{{form.internshipPosition}}</el-descriptions-item>
                        <el-descriptions-item label="实习开始日期" >
                            {{ parseTime(form.internshipStart, '{y}-{m}-{d}')}}
                        </el-descriptions-item>
                        <el-descriptions-item label="实习结束日期" >
                            {{ parseTime(form.internshipEnd, '{y}-{m}-{d}')}}
                        </el-descriptions-item>
                        <el-descriptions-item label="学校指导教师" >{{form.instructorTeacher}}</el-descriptions-item>
                        <el-descriptions-item label="企业导师" >{{form.enterpriseMentor}}</el-descriptions-item>
                        <el-descriptions-item label="实习记录" >{{form.internshipRecord}}</el-descriptions-item>
      </el-descriptions>
      <!-- 使用标签页组织子表详情 -->
      <el-tabs type="border-card">
        <el-tab-pane label="任务书">
          <el-table :data="hrmInternTaskList" :row-class-name="rowHrmInternTaskIndex" @selection-change="handleHrmInternTaskSelectionChange" ref="hrmInternTask">
<!--            <el-table-column type="selection" width="50" align="center" />-->
            <el-table-column label="序号" align="center" prop="index" width="50"/>
<!--                    <el-table-column label="用户ID，冗余便于查询" prop="userId" width="150" />-->
            <!-- 实习总体目标 -->
            <el-table-column label="实习总体目标" align="center" width="180">
              <template #default="scope">
                <el-tooltip placement="top" :open-delay="400" :enterable="true">
                  <!-- Tooltip 内容：支持 HTML 渲染 -->
                  <div slot="content" v-html="scope.row.internshipObjective"></div>
                  <!-- 单元格显示：最多3行，超出省略 -->
                  <div class="cell-html-ellipsis" v-html="scope.row.internshipObjective"></div>
                </el-tooltip>
              </template>
            </el-table-column>

            <!-- 实习具体内容 -->
            <el-table-column label="实习具体内容" align="center" min-width="200">
              <template #default="scope">
                <el-tooltip placement="top" :open-delay="400" :enterable="true">
                  <div slot="content" v-html="scope.row.internshipContent"></div>
                  <div class="cell-html-ellipsis" v-html="scope.row.internshipContent"></div>
                </el-tooltip>
              </template>
            </el-table-column>

            <!-- 实习阶段计划或时间安排 -->
            <el-table-column label="实习阶段计划或时间安排" align="center" min-width="200">
              <template #default="scope">
                <el-tooltip placement="top" :open-delay="400" :enterable="true">
                  <div slot="content" v-html="scope.row.internshipPlan"></div>
                  <div class="cell-html-ellipsis" v-html="scope.row.internshipPlan"></div>
                </el-tooltip>
              </template>
            </el-table-column>

            <!-- 实习要求 -->
            <el-table-column label="实习要求" align="center" width="180">
              <template #default="scope">
                <el-tooltip placement="top" :open-delay="400" :enterable="true">
                  <div slot="content" v-html="scope.row.internshipRequirements"></div>
                  <div class="cell-html-ellipsis" v-html="scope.row.internshipRequirements"></div>
                </el-tooltip>
              </template>
            </el-table-column>

                    <el-table-column label="状态" prop="status" width="150">
                      <template slot-scope="scope">
                        <dict-tag :options="dict.type.collegeco_intern_task_status" :value="scope.row.status"/>
                      </template>
                    </el-table-column>
                    <el-table-column label="审核人" prop="enterpriseMentor" width="150" />
                    <el-table-column label="审核时间" prop="reviewTime"  >
                      <template slot-scope="scope">
                        {{ parseTime(scope.row.reviewTime, '{y}-{m}-{d}')}}
                      </template>
                    </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="成绩鉴定">
      <el-table :data="hrmInternEvaluationList" :row-class-name="rowHrmInternEvaluationIndex" @selection-change="handleHrmInternEvaluationSelectionChange" ref="hrmInternEvaluation">
<!--        <el-table-column type="selection" width="50" align="center" />-->
        <el-table-column label="序号" align="center" prop="index" width="50"/>
<!--        <el-table-column label="用户ID" prop="userId" width="150" />-->
<!--        <el-table-column label="员工ID" prop="empId" width="150" />-->
<!--        <el-table-column label="使用的评分模板ID" prop="templateId" width="150" />-->
        <el-table-column label="模板名称" prop="templateName" width="150" />
        <el-table-column label="自我鉴定" align="center" width="200">
          <template #default="scope">
            <el-tooltip placement="top" :open-delay="400" :enterable="true">
              <!-- Tooltip 内容：支持 HTML 渲染 -->
              <div slot="content" v-html="scope.row.selfEvaluation"></div>
              <!-- 单元格显示：最多3行，超出省略 -->
              <div class="cell-html-ellipsis" v-html="scope.row.selfEvaluation"></div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="总分" prop="totalScore" width="150" />
        <el-table-column label="总满分" prop="totalMaxScore" width="150" />
        <el-table-column label="等级" prop="grade" width="150" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.collegeco_intern_evaluation_grade" :value="scope.row.grade"/>
          </template>
        </el-table-column>
        <el-table-column label="评价人姓名" prop="evaluatorName" width="150" />
        <el-table-column label="评价人职位" prop="evaluatorPosition" width="150" />
        <el-table-column label="评价日期" prop="evaluateTime"  >
          <template slot-scope="scope">
            {{ parseTime(scope.row.evaluateTime, '{y}-{m}-{d}')}}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" width="150">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.collegeco_intern_evaluation_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
      </el-table>
        </el-tab-pane>


        <el-tab-pane label="实习报告">
      <el-table :data="hrmInternReportList" :row-class-name="rowHrmInternReportIndex" @selection-change="handleHrmInternReportSelectionChange" ref="hrmInternReport">
<!--        <el-table-column type="selection" width="50" align="center" />-->
        <el-table-column label="序号" align="center" prop="index" width="50"/>
<!--        <el-table-column label="用户ID，冗余便于查询" prop="userId" width="150" />-->
<!--        <el-table-column label="员工ID" prop="empId" width="150" />-->
        <el-table-column label="报告标题" prop="reportTitle" width="150" />
        <el-table-column label="实习周期" prop="reportPeriod" width="150" />
        <el-table-column label="提交时间" prop="submitTime"  >
          <template slot-scope="scope">
            {{ parseTime(scope.row.submitTime, '{y}-{m}-{d}')}}
          </template>
        </el-table-column>
        <!-- 实习目的 -->
        <el-table-column label="实习目的" align="center" width="180">
          <template slot-scope="scope">
            <el-tooltip placement="top" :open-delay="400" :enterable="true">
              <div slot="content" v-html="scope.row.internshipPurpose"></div>
              <div class="cell-html-ellipsis" v-html="scope.row.internshipPurpose"></div>
            </el-tooltip>
          </template>
        </el-table-column>

        <!-- 实习内容 -->
        <el-table-column label="实习内容" align="center" width="180">
          <template slot-scope="scope">
            <el-tooltip placement="top" :open-delay="400" :enterable="true">
              <div slot="content" v-html="scope.row.internshipContent"></div>
              <div class="cell-html-ellipsis" v-html="scope.row.internshipContent"></div>
            </el-tooltip>
          </template>
        </el-table-column>

        <!-- 实习经历 -->
        <el-table-column label="实习经历" align="center" width="180">
          <template slot-scope="scope">
            <el-tooltip placement="top" :open-delay="400" :enterable="true">
              <div slot="content" v-html="scope.row.internshipExperience"></div>
              <div class="cell-html-ellipsis" v-html="scope.row.internshipExperience"></div>
            </el-tooltip>
          </template>
        </el-table-column>

        <!-- 实习体会 -->
        <el-table-column label="实习体会" align="center" width="180">
          <template slot-scope="scope">
            <el-tooltip placement="top" :open-delay="400" :enterable="true">
              <div slot="content" v-html="scope.row.internshipReflection"></div>
              <div class="cell-html-ellipsis" v-html="scope.row.internshipReflection"></div>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="状态" prop="status" width="150">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.collegeco_intern_report_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column label="审核人" prop="enterpriseMentor" width="150" />
        <el-table-column label="审核时间" prop="reviewTime"  >
          <template slot-scope="scope">
            {{ parseTime(scope.row.reviewTime, '{y}-{m}-{d}')}}
          </template>
        </el-table-column>
      </el-table>
        </el-tab-pane>


        <el-tab-pane label="周报记录">
      <el-table :data="hrmInternWeeklyLogList" :row-class-name="rowHrmInternWeeklyLogIndex" @selection-change="handleHrmInternWeeklyLogSelectionChange" ref="hrmInternWeeklyLog">
<!--        <el-table-column type="selection" width="50" align="center" />-->
        <el-table-column label="序号" align="center" prop="index" width="50"/>
<!--        <el-table-column label="用户ID" prop="userId" width="150" />-->
        <el-table-column label="本周开始日期" prop="weekStartDate"  >
          <template slot-scope="scope">
            {{ parseTime(scope.row.weekStartDate, '{y}-{m}-{d}')}}
          </template>
        </el-table-column>
        <el-table-column label="本周结束日期" prop="weekEndDate"  >
          <template slot-scope="scope">
            {{ parseTime(scope.row.weekEndDate, '{y}-{m}-{d}')}}
          </template>
        </el-table-column>
        <el-table-column label="提交时间" prop="submitTime"  >
          <template slot-scope="scope">
            {{ parseTime(scope.row.submitTime, '{y}-{m}-{d}')}}
          </template>
        </el-table-column>
        <!-- 工作内容与要求 -->
        <el-table-column label="工作内容与要求" align="center" width="250">
          <template slot-scope="scope">
            <el-tooltip placement="top" :open-delay="400" :enterable="true">
              <!-- Tooltip 内容（支持 HTML） -->
              <div slot="content" v-html="scope.row.workContent"></div>
              <!-- 单元格显示（最多3行，省略） -->
              <div class="cell-html-ellipsis" v-html="scope.row.workContent"></div>
            </el-tooltip>
          </template>
        </el-table-column>

        <!-- 工作情况记录 -->
        <el-table-column label="工作情况记录" align="center" width="250">
          <template slot-scope="scope">
            <el-tooltip placement="top" :open-delay="400" :enterable="true">
              <div slot="content" v-html="scope.row.workRecord"></div>
              <div class="cell-html-ellipsis" v-html="scope.row.workRecord"></div>
            </el-tooltip>
          </template>
        </el-table-column>

        <!-- 个人体会或收获 -->
        <el-table-column label="个人体会或收获" align="center" width="250">
          <template slot-scope="scope">
            <el-tooltip placement="top" :open-delay="400" :enterable="true">
              <div slot="content" v-html="scope.row.personalGain"></div>
              <div class="cell-html-ellipsis" v-html="scope.row.personalGain"></div>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="状态" prop="status" width="150">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.collegeco_intern_weekly_log_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column label="审核人" prop="enterpriseMentor" width="150" />
        <el-table-column label="审核时间" prop="reviewTime"  >
          <template slot-scope="scope">
            {{ parseTime(scope.row.reviewTime, '{y}-{m}-{d}')}}
          </template>
        </el-table-column>
      </el-table>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listIntern, getIntern, delIntern, addIntern, updateIntern } from "@/api/collegeco/intern";
import {listUser} from "@/api/system/user";

export default {
  name: "Intern",
  dicts: ['collegeco_intern_status' , 'collegeco_intern_task_status' , 'collegeco_intern_evaluation_status' , 'collegeco_intern_report_status' , 'collegeco_intern_weekly_log_status' , 'collegeco_intern_evaluation_grade'],
  data() {
    return {
      originalStatus: null,
      // 是否显示更多
      isShowMore: false,
      // el-table 高度
      tableHeight: 650, // 用于存储 el-table 的高度
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedHrmInternTask: [],
      // 子表选中数据
      checkedHrmInternEvaluation: [],
      // 子表选中数据
      checkedHrmInternReport: [],
      // 子表选中数据
      checkedHrmInternWeeklyLog: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 实习生信息表格数据
      internList: [],
      // 实习生任务书表格数据
      hrmInternTaskList: [],
      // 实习生成绩鉴定主表格数据
      hrmInternEvaluationList: [],
      // 实习报告表格数据
      hrmInternReportList: [],
      // 实习周报（每周提交一次）表格数据
      hrmInternWeeklyLogList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示详情弹出层
      openInfo: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        empId: null,
        studentName: null,
        studentNo: null,
        school: null,
        college: null,
        major: null,
        className: null,
        internshipCompany: null,
        internshipPosition: null,
        internshipStart: null,
        internshipEnd: null,
        instructorTeacher: null,
        enterpriseMentor: null,
        internshipRecord: null,
        status: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        userId: [
          { required: true, message: "系统用户ID，关联用户表不能为空", trigger: "blur" }
        ],
        studentName: [
          { required: true, message: "学生姓名不能为空", trigger: "blur" }
        ],
        studentNo: [
          { required: true, message: "学号不能为空", trigger: "blur" }
        ],
        school: [
          { required: true, message: "学校名称不能为空", trigger: "blur" }
        ],
        college: [
          { required: true, message: "学院不能为空", trigger: "blur" }
        ],
        major: [
          { required: true, message: "专业不能为空", trigger: "blur" }
        ],
        className: [
          { required: true, message: "班级名称，如：计算机2021级1班不能为空", trigger: "blur" }
        ],
        internshipCompany: [
          { required: true, message: "实习单位不能为空", trigger: "blur" }
        ],
        internshipPosition: [
          { required: true, message: "实习岗位不能为空", trigger: "blur" }
        ],
        internshipStart: [
          { required: true, message: "实习开始日期不能为空", trigger: "blur" }
        ],
        internshipEnd: [
          { required: true, message: "实习结束日期不能为空", trigger: "blur" }
        ],
      },
      // 用户表格数据
      userList: [],
    };
  },
  created() {
    this.getList();
    this.setTableHeight();
    window.addEventListener('resize', this.setTableHeight); // 监听窗口大小变化

    // 初始获取用户信息
    this.getUserList();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setTableHeight); // 移除事件监听
  },
  computed: {
    userName(){
      const user = this.userList.find(item =>
        String(item.userId) === String(this.form.userId)
      );
      return user ? user.userName : '未知用户';
    }
  },
  methods: {
    getUserList(){
      listUser(
        {
          pageNum: 1,
          pageSize: 10000,
        }).then(response => {
        this.userList = response.rows;
        console.log("userList",this.userList)

      });
    },
    // 根据 value 返回字典 label
    getStatusLabel(value) {
      console.log('当前 status 值:', value, '类型:', typeof value);
      const strValue = String(value);
      const dict = this.dict.type.collegeco_intern_status.find(item => item.value === strValue);
      return dict ? dict.label : '未知状态';
    },
    getStatusType(value) {
      switch (value) {
        case '1': return 'info';     // 实习中
        case '2': return 'success';  // 已转正
        case '3': return 'warning';  // 已终止
        case '4': return 'danger';   // 已结束
        default: return 'info';
      }
    },

    /** 查询实习生信息列表 */
    getList() {
      this.loading = true;
      listIntern(this.queryParams).then(response => {
        this.internList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openInfo = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        internId: null,
        userId: null,
        empId: null,
        studentName: null,
        studentNo: null,
        school: null,
        college: null,
        major: null,
        className: null,
        internshipCompany: null,
        internshipPosition: null,
        internshipStart: null,
        internshipEnd: null,
        instructorTeacher: null,
        enterpriseMentor: null,
        internshipRecord: null,
        status: null,
        createTime: null,
        updateTime: null
      };
      this.originalStatus = null;
      this.hrmInternTaskList = [];
      this.hrmInternEvaluationList = [];
      this.hrmInternReportList = [];
      this.hrmInternWeeklyLogList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.internId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加实习生信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const internId = row.internId || this.ids
      getIntern(internId).then(response => {
        this.form  = response.data;
        console.log(this.form);
      /*  const status = Number(data.status);

        // 保存原始状态（用于禁用）
        this.originalStatus =  status;

        this.form = {
          ...data,
          status: status // 强制转为数字
        };*/
        this.hrmInternTaskList = response.data.hrmInternTaskList;
        this.hrmInternEvaluationList = response.data.hrmInternEvaluationList;
        this.hrmInternReportList = response.data.hrmInternReportList;
        this.hrmInternWeeklyLogList = response.data.hrmInternWeeklyLogList;
        this.open = true;
        this.title = "修改实习生信息";
      });
    },
    /** 详情按钮操作 */
    handleInfo(row) {
      this.reset();
      const internId = row.internId || this.ids
      getIntern(internId).then(response => {
        this.form = response.data;
            this.hrmInternTaskList = response.data.hrmInternTaskList;
            this.hrmInternEvaluationList = response.data.hrmInternEvaluationList;
            this.hrmInternReportList = response.data.hrmInternReportList;
            this.hrmInternWeeklyLogList = response.data.hrmInternWeeklyLogList;
        this.openInfo = true;
        this.title = "实习生信息详情";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.hrmInternTaskList = this.hrmInternTaskList;
          this.form.hrmInternEvaluationList = this.hrmInternEvaluationList;
          this.form.hrmInternReportList = this.hrmInternReportList;
          this.form.hrmInternWeeklyLogList = this.hrmInternWeeklyLogList;
          if (this.form.internId != null) {
            updateIntern(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addIntern(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const internIds = row.internId || this.ids;
      this.$modal.confirm('是否确认删除实习生信息编号为"' + internIds + '"的数据项？').then(function() {
        return delIntern(internIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
	/** 实习生任务书序号 */
    rowHrmInternTaskIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 实习生任务书添加按钮操作 */
    handleAddHrmInternTask() {
      let obj = {};
      obj.userId = "";
      obj.internshipObjective = "";
      obj.internshipContent = "";
      obj.internshipPlan = "";
      obj.internshipRequirements = "";
      obj.status = "";
      obj.enterpriseMentor = "";
      obj.reviewTime = "";
      obj.remarks = "";
      this.hrmInternTaskList.push(obj);
    },
    /** 实习生任务书删除按钮操作 */
    handleDeleteHrmInternTask() {
      if (this.checkedHrmInternTask.length == 0) {
        this.$modal.msgError("请先选择要删除的实习生任务书数据");
      } else {
        const hrmInternTaskList = this.hrmInternTaskList;
        const checkedHrmInternTask = this.checkedHrmInternTask;
        this.hrmInternTaskList = hrmInternTaskList.filter(function(item) {
          return checkedHrmInternTask.indexOf(item.index) == -1
        });
      }
    },
    /** 实习生成绩鉴定主序号 */
    rowHrmInternEvaluationIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 实习生成绩鉴定主添加按钮操作 */
    handleAddHrmInternEvaluation() {
      let obj = {};
      obj.userId = "";
      obj.empId = "";
      obj.templateId = "";
      obj.templateName = "";
      obj.selfEvaluation = "";
      obj.totalScore = "";
      obj.totalMaxScore = "";
      obj.grade = "";
      obj.companyOpinion = "";
      obj.evaluatorName = "";
      obj.evaluatorPosition = "";
      obj.evaluateTime = "";
      obj.status = "";
      this.hrmInternEvaluationList.push(obj);
    },
    /** 实习生成绩鉴定主删除按钮操作 */
    handleDeleteHrmInternEvaluation() {
      if (this.checkedHrmInternEvaluation.length == 0) {
        this.$modal.msgError("请先选择要删除的实习生成绩鉴定主数据");
      } else {
        const hrmInternEvaluationList = this.hrmInternEvaluationList;
        const checkedHrmInternEvaluation = this.checkedHrmInternEvaluation;
        this.hrmInternEvaluationList = hrmInternEvaluationList.filter(function(item) {
          return checkedHrmInternEvaluation.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleHrmInternTaskSelectionChange(selection) {
      this.checkedHrmInternTask = selection.map(item => item.index)
    },
    /** 复选框选中数据 */
    handleHrmInternEvaluationSelectionChange(selection) {
      this.checkedHrmInternEvaluation = selection.map(item => item.index)
    },
    /** 实习报告序号 */
    rowHrmInternReportIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 实习报告添加按钮操作 */
    handleAddHrmInternReport() {
      let obj = {};
      obj.userId = "";
      obj.empId = "";
      obj.reportTitle = "";
      obj.reportPeriod = "";
      obj.submitTime = "";
      obj.internshipPurpose = "";
      obj.internshipContent = "";
      obj.internshipExperience = "";
      obj.internshipReflection = "";
      obj.attachments = "";
      obj.remarks = "";
      obj.status = "";
      obj.enterpriseMentor = "";
      obj.reviewTime = "";
      obj.reviewOpinion = "";
      this.hrmInternReportList.push(obj);
    },
    /** 实习报告删除按钮操作 */
    handleDeleteHrmInternReport() {
      if (this.checkedHrmInternReport.length == 0) {
        this.$modal.msgError("请先选择要删除的实习报告数据");
      } else {
        const hrmInternReportList = this.hrmInternReportList;
        const checkedHrmInternReport = this.checkedHrmInternReport;
        this.hrmInternReportList = hrmInternReportList.filter(function(item) {
          return checkedHrmInternReport.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleHrmInternReportSelectionChange(selection) {
      this.checkedHrmInternReport = selection.map(item => item.index)
    },
    /** 实习周报（每周提交一次）序号 */
    rowHrmInternWeeklyLogIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 实习周报（每周提交一次）添加按钮操作 */
    handleAddHrmInternWeeklyLog() {
      let obj = {};
      obj.userId = "";
      obj.weekStartDate = "";
      obj.weekEndDate = "";
      obj.submitTime = "";
      obj.workContent = "";
      obj.workRecord = "";
      obj.personalGain = "";
      obj.status = "";
      obj.reviewerId = "";
      obj.reviewTime = "";
      obj.reviewOpinion = "";
      obj.attachments = "";
      obj.remarks = "";
      this.hrmInternWeeklyLogList.push(obj);
    },
    /** 实习周报（每周提交一次）删除按钮操作 */
    handleDeleteHrmInternWeeklyLog() {
      if (this.checkedHrmInternWeeklyLog.length == 0) {
        this.$modal.msgError("请先选择要删除的实习周报（每周提交一次）数据");
      } else {
        const hrmInternWeeklyLogList = this.hrmInternWeeklyLogList;
        const checkedHrmInternWeeklyLog = this.checkedHrmInternWeeklyLog;
        this.hrmInternWeeklyLogList = hrmInternWeeklyLogList.filter(function(item) {
          return checkedHrmInternWeeklyLog.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleHrmInternWeeklyLogSelectionChange(selection) {
      this.checkedHrmInternWeeklyLog = selection.map(item => item.index)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('intern/intern/export', {
        ...this.queryParams
      }, `实习生信息数据导出_${new Date().getTime()}.xlsx`)
    },
    // 设置表格高度
    setTableHeight() {
      const appContainer = document.getElementById('app-container');
      if (appContainer) {
        this.tableHeight = appContainer.clientHeight * 0.8;
      }
    }
  }
};
</script>
<style>
/* 统一单元格样式：最多显示3行，超出隐藏，带省略号 */
.cell-html-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: 4.5em;
  padding: 2px 0;
  margin: 0;
  font-size: 14px;
  cursor: pointer;
  text-align: left; /* 如果内容左对齐更清晰 */
}

/* 优化 Tooltip 样式，支持 HTML 列表展示 */
.el-tooltip__popper {
  max-width: 400px;
  max-height: 300px;
  overflow-y: auto;
  word-break: break-word;
  line-height: 1.6;
  text-align: left;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.el-tooltip__popper ul,
.el-tooltip__popper ol {
  margin: 8px 0;
  padding-left: 20px;
  margin-block-start: 0.3em;
  margin-block-end: 0.3em;
}
.el-tooltip__popper li {
  margin: 4px 0;
}
.el-tooltip__popper p {
  margin: 6px 0;
}
.el-tooltip__popper::-webkit-scrollbar {
  width: 6px;
}

.el-tooltip__popper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.el-tooltip__popper::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.el-tooltip__popper::-webkit-scrollbar-thumb:hover {
  background: #999;
}
</style>
